<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card  style="height:800px">
        <Card>
            <header>
                <span>姓名:</span>
                <Input v-model="withholdCondition.custName" placeholder="姓名" style="width: 150px" />
                <span style="width: 200px;margin-left: 20px;">身份证:</span>
                <Input v-model="withholdCondition.custCardNo" placeholder="身份证" style="width: 150px" />
                <span style="width: 200px;margin-left: 20px;">贷款编号:</span>
                <Input v-model="withholdCondition.loanId" placeholder="贷款编号" style="width: 150px" />
                <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
            </header>
        </Card>
        <Card>
            <Table border :columns="columns" :data="columnDatas" style="width: 100%;"></Table>
            <div style="margin-top: 100px;text-align: center;">
                <Page :total="withholdCondition.total" :current="withholdCondition.pageNum" :page-size="withholdCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
        <Modal v-model="modal1" title="请输入代扣金额以及选择通道" @on-ok="ok" @on-cancel="cancel" :scrollable="true">
            <div class="withhold-payment-popup-div">
                <div class="withhold-payment-font-div">输入代扣金额：</div>
                <Input v-model="innerCondition.withholdAmout" style="width: 150px" />
            </div>

            <div class="withhold-payment-popup-div">
                <div class="withhold-payment-font-div"> 请选择支付通道:</div>
                <Select v-model="innerCondition.paymentChannel" class="v-select-wrapper" style="width: 150px" @on-change="selectOption" :label-in-value="true">
                    <Option v-for="item in paymentChannelList" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
            </div>
            <div style="text-align:center;margin-top:50px;color: red;">
                口袋、渤海支付通道选项无效！
            </div>
        </Modal>

        <Modal v-model="modal2" title="温馨提示" @on-ok="ok2" @on-cancel="cancel2" :scrollable="true">
            请确认需要申请的金额为:
            <span style="color:red">{{confirmData.applyAmount}}</span>,客户姓名：
            <span style="color:red">{{confirmData.custName}}</span>,期数：
            <span style="color:red">{{confirmData.tenor}}</span>， 银行卡卡号：
            <span style="color:red">{{confirmData.bankCardNo}}</span>，选择的 支付通道为:
            <span style="color:red">{{confirmData.paymentChannel}}</span>。 本次应还金额为：
            <span style="color:red">{{confirmData.paymentTotal}}</span>
        </Modal>
    </Card>

</template>

<script>

export default {

  data () {
    return {
      modal1: false,
      modal2: false,
      withholdCondition: {
        loanId: '',
        custName: '',
        custCardNo: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      paymentChannelList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: 'FASTPAY',
          label: '快付通'
        },
        {
          value: 'BF',
          label: '宝付'
        }
      ],
      innerCondition: {
        custName: '',
        tenor: '',
        bankCardNo: '',
        paymentChannel: '',
        withholdAmout: '',
        loanId: '',
        paymentTotal: 0
      },
      confirmData: {
        custName: '',
        applyAmount: '',
        tenor: '',
        bankCardNo: '',
        paymentTotal: '',
        paymentChannel: ''
      },
      columns: [
        {
          key: 'loanId',
          title: '进件编号',
          align: 'center',
          width: 155,
          className: 'tbake'
        },
        {
          title: '期数',
          key: 'tenor',
          align: 'center',
          width: 50,
          className: 'tbake'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '证件号码',
          key: 'custCardNo',
          align: 'center',
          width: 165,
          className: 'tbake'
        },
        {
          title: '本金',
          key: 'principal',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还本金',
          key: 'principalAct',
          align: 'center',
          width: 65,
          className: 'tbake'
        },

        {
          title: '利息',
          key: 'interest',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还利息',
          key: 'interestAct',
          align: 'center',
          width: 65,
          className: 'tbake'
        },

        {
          title: '管理费',
          key: 'managementFee',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还管理费',
          key: 'managementFeeAct',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '违约金',
          key: 'penaltyFee',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还违约金',
          key: 'penaltyFeeAct',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '罚息',
          key: 'lateFee',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还罚息',
          key: 'lateFeeAct',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '逾期天数',
          key: 'delqDays',
          align: 'center',
          width: 55,
          className: 'tbake'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 80,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }

            if (params.row.status === '10') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '应还款总额',
          key: 'paymentTotal',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '费用汇总',
          key: 'feeTotal',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '已还费用汇总',
          key: 'feeTotalAct',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            var vm = this
            if (params.row.status === '0' || params.row.status === '1') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    vm.modal1 = true
                    vm.innerCondition.loanId = params.row.loanId
                    vm.innerCondition.paymentTotal = params.row.paymentTotal
                    vm.innerCondition.custName = params.row.custName
                    vm.innerCondition.tenor = params.row.tenor
                    vm.innerCondition.bankCardNo = params.row.paymentAcctNo
                  }
                }
              }, '代扣申请')
            }
          }
        }
      ],
      columnDatas: []
    }
  },

  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.withholdCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.withholdCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/applyList', this.withholdCondition).then(re => {
        var data = re.data
        vm.columnDatas = data.data.list
        vm.withholdCondition.total = data.data.total
      }).catch(er => {

      })
    },
    ok () {
      var vm = this
      var withholdAmout = vm.innerCondition.withholdAmout
      if (withholdAmout === '' || withholdAmout == null) {
        this.$Message.warning('请填写代扣金额')
        return
      }
      var reg = /^\d+(?=\.{0,1}\d+$|$)/
      if (!reg.test(withholdAmout)) {
        this.$Message.warning('代扣金额必须为正数')
        return
      }
      if (withholdAmout > vm.innerCondition.paymentTotal) {
        this.$Message.warning('代扣金额不能大于应还款总额')
        return
      }
      vm.modal2 = true
      vm.confirmData.custName = vm.innerCondition.custName
      vm.confirmData.applyAmount = vm.innerCondition.withholdAmout
      vm.confirmData.tenor = vm.innerCondition.tenor
      vm.confirmData.bankCardNo = vm.innerCondition.bankCardNo
      vm.confirmData.paymentTotal = vm.innerCondition.paymentTotal
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },

    ok2 () {
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/handleWithholeApply', this.innerCondition).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
      }).catch(er => {

      })
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
    },
    selectOption (value) {
      var vm = this
      vm.confirmData.paymentChannel = value.label
    }
  }

}
</script>

<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
.withhold-payment-top-div {
  margin-top: 40px;
}

.withhold-payment-left-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.withhold-payment-i-icon {
  float: left;
  margin-left: 20px;
}

.withhold-payment-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
  width: 150px;
}
.withhold-payment-popup-div {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.withhold-payment-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}
</style>
